<template>
	<view>
		<scroll-view :style="'height:' + windowHeight + 'px;'" scroll-y="true" :scroll-top="scrollTop" @scroll="scroll">
			<!-- 头部 -->
			<view class="head">
				<headimg :realSrc="userInfo.avatar" :img_urls="[userInfo.avatar]" isLarge="true"></headimg>
				<view class="head_info">
					<view class="head_info_name">{{userInfo.nicheng}}</view>
					<view class="head_info_sign">{{userInfo.signature ? userInfo.signature : '未设置个性签名'}}</view>
				</view>
			</view>

			<!-- 选项卡 -->
			<view class="tabs-top" v-if="isTop">
				<view :class="{'tabs-item':item,'tabs-itemActive':index === tabIndex}" v-for="(item, index) in tabList" :key="index"
				 @click="changeTabs(index)">{{item}}
				</view>
			</view>

			<view class="cont" id="tab0">
				<v-base @changeInfo="getuserInfo(1)" ref="vBase"></v-base>
			</view>
			<view class="cont" id="tab1">
				<other-information @changeInfo="getuserInfo(2)" ref="otherInformation"></other-information>
			</view>
			<view class="cont" id="tab2">
				<v-account @changeInfo="getuserInfo(3)" ref="vAccount"></v-account>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import headimg from '@/components/head_img.vue';
	import vBase from './components/base.vue';
	import vAccount from './components/account.vue';
	import otherInformation from './components/other-information.vue';
	export default {
		components: {
			headimg,
			vBase,
			vAccount,
			otherInformation
		},
		data() {
			return {
				userInfo: {}, //个人信息
				tabList: ['基本资料', '扩展资料', '账户安全'], //选项卡列表
				tabIndex: 0, //选项卡索引
				isTop: false, //是否触顶
				windowHeight: uni.getSystemInfoSync().windowHeight + 50, //可使用窗口高度 (可使用窗口高度不包括tabBar的高度，50是tabBar的高度)
				scrollTop: 0,
				oldScrollTop: 0
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '/pages/mine/QR-code'
			});
		},
		onShow() {
			this.getuserInfo(0);
		},
		methods: {
			// 获取个人信息
			getuserInfo(type) {
				this.$zapi.apiPost('user/currency.basic/GetUserInfo').then(res => {
					if (res.data.code == 200) {
						this.userInfo = res.data.data;
						uni.setStorageSync('userInfo', res.data.data);
						//某一模块修改数据，其他模块相关数据保持一致
						if (type != 0) {
							var _this = this;
							setTimeout(function() {
								if (type != 1) {
									_this.$refs.vBase.GetUserInfo();
								}
								if (type != 2) {
									_this.$refs.otherInformation.getData();
								}
								if (type != 3) {
									_this.$refs.vAccount.GetUserInfo();
								}
							}, 10);
						}
					}
				})
			},
			// 切换选项卡
			changeTabs(index) {
				this.tabIndex = index;
				uni.createSelectorQuery().select('#tab' + index).boundingClientRect(data => {
					this.$nextTick(function() {
						this.scrollTop = data.top + this.oldScrollTop - 58; //滑动位置计算：获取元素当前在页面中的位置 加上 页面滚动后 的 页面位置
					});
				}).exec();
			},
			// 滚动触发
			scroll(event) {
				this.oldScrollTop = event.detail.scrollTop;
				const query = uni.createSelectorQuery().in(this);

				query.select('#tab0').boundingClientRect(data => {
					if (data.top < 200) {
						this.tabIndex = 0;
					}
				}).exec();

				query.select('#tab1').boundingClientRect(data => {
					if (data.top < 200) {
						this.tabIndex = 1;
					}
				}).exec();

				query.select('#tab2').boundingClientRect(data => {
					if (data.top < 200) {
						this.tabIndex = 2;
					}
				}).exec();
				this.$forceUpdate();
				if (event.detail.scrollTop >= 55) {
					this.isTop = true;
				} else {
					this.isTop = false;
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		margin: 0 30upx;
		width: calc(100% - 60upx);
		background-color: #FAFAFA;
	}

	/* 头部 */
	.head {
		display: flex;
		align-items: center;
		margin-top: 30upx;

		.head_image {
			width: 168upx;
			height: 168upx;
		}

		.head_info {
			color: #333333;
			margin-left: 40upx;

			.head_info_name {
				font-size: 36upx;
				font-weight: 500;
				margin-bottom: 24upx;
			}

			.head_info_sign {
				font-size: 24upx;
			}
		}
	}

	/* 选项卡 */
	.tabs-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		white-space: nowrap;
		overflow: auto;
		width: 100%;
		height: 88upx;
		background-color: #FFFFFF;
		position: fixed;
		left: 0;
		/* #ifdef APP-PLUS */
		top: 0upx;
		/* #endif */
		/* #ifdef H5 */
		top: 88upx;
		/* #endif */
		z-index: 999;

		.tabs-item {
			position: relative;
			color: #333333;
			font-size: 32upx;
			font-size: 500;
			padding: 0 30upx;
		}

		.tabs-itemActive {
			color: #FF9900;
		}
	}

	.cont {
		background: #FFFFFF;
		border-radius: 8upx;
		margin-top: 30upx;
		padding: 40upx 30upx;
		width: calc(100% - 60upx);
	}

	.cont:last-child {
		border-bottom: 160upx solid #FAFAFA;
	}
</style>
